import React, { lazy, Suspense } from "react"
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"

const Home = lazy(() => import('@/views/home/index'))
const Login = lazy(() => import('@/views/login/index'))
const Graphics = lazy(() => import('@/views/chart/index'))
const Actor = lazy(() => import('@/views/actor/canvasTable'))
const Graph = lazy(() => import('@/views/graph/index'))
const ListDetail = lazy(() => import('@/views/graph/detail'))
const Calendar = lazy(() => import('@/views/calendar/index'))
const Forum = lazy(() => import('@/views/forum/index'))
const Board = lazy(() => import('@/views/board/index'))
const Notfound = lazy(() => import('@/views/404'))

const LazyComponent = (Component: JSX.Element) => {
    return (
        <Suspense fallback={<div>loading...</div>}>
            {Component}
        </Suspense>
    )
}

const router = () => (
    <BrowserRouter>
        {/* <Suspense fallback={<div>loading...</div>}> */}
        <Routes>
            <Route path='/' element={LazyComponent(<Home />)}>
                {/* <Route path='' element={<HomePage />}></Route>
                    <Route path='/about' element={<About />}></Route>
                    <Route path='/mine' element={<Mine />}></Route> */}
                {/* <Route index element={<Graphics />} /> */}
                <Route path='' element={LazyComponent(<Graphics />)} />
                {/* 两种写法  index指定 或者path='' 指定默认展示页 */}
                {/*  or   <Route path='' element={<Graphics />} /> */}
                {/* <Route path='/graph' element={<Graph />}></Route> */}
                <Route path='/forum' element={LazyComponent(<Forum />)}></Route>
                <Route path='/graph' element={LazyComponent(<Graph />)}></Route>
                <Route path='/graph/:id' element={LazyComponent(<ListDetail />)}></Route>
                <Route path='/board' element={LazyComponent(<Board />)}></Route>
                <Route path="/Notfound" element={<Notfound />}></Route>
                <Route path='*' element={<Navigate to="/Notfound" />} ></Route>

            </Route>
            <Route path='/login' element={LazyComponent(<Login />)}></Route>
            <Route path='/actor' element={<Actor />}></Route>
            <Route path='/calendar' element={<Calendar />}>
                {/* <Route path='/calendar/:id' element={<Calendar />}></Route> */}
            </Route>


        </Routes>
        {/* </Suspense> */}
    </BrowserRouter>
)

export default router

// 路由拦截
// use element={<AuthComponent />}
function AuthComponent({ children }: any) {
    const isAuth = localStorage.getItem('token')
    return isAuth ? children : <Navigate to='./'></Navigate>
}